<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
?>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>登录</title>

	<?= Html::jsFile('@web/libs/jquery/jquery-2.1.4.min.js'); ?>


	<?= Html::cssFile('@web/libs/bootstrap/dist/css/bootstrap.min.css'); ?>
	<?= Html::cssFile('@web/backend/css/main.css'); ?>

	<style>
		html,body{width: 100%;height: 100%;margin: 0;padding: 0;}
		.row{margin: 0;}
		#login .loginBox .content .form-group{margin: 0;padding-top: 11px;position: relative;}
		.errMsg{position: absolute;right: -15px;color: #ff8486;transform: translateX(100%);-webkit-transform:translateX(100%);-moz-transform: translateX(100%);-ms-transform: translateX(100%); }
		.form-control:focus{
			border: 0;
			outline: 0;
			box-shadow: none;}
		.form-control{
			-webkit-box-shadow: none;
			box-shadow: none;
		}
		@media (min-width: 768px){
			.form-horizontal .control-label {
				padding-top: 2px;
				margin-bottom: 0;
				text-align: right;
				padding-left: 0;
			}
		}
		#login .loginBox .content-bottom .btnBottom.ok{width: 100%;background: #fe7b9d url("<?=Yii::getAlias('@web/backend/img/login/login_ico.png');?>") no-repeat 249px 20px;}

	</style>
</head>
<body>
	<div id="login" class="row">
		<div style="position: relative;height: 502px;top: 50%;margin-top: -175px;">
			<img class="img-header" src="<?=Yii::getAlias('@web/backend/img/login/header.png');?>" alt=""/>
			<img class="img-arms leftArm" src="<?=Yii::getAlias('@web/backend/img/login/left_arm.png');?>" alt=""/>
			<img class="img-arms rightArm" src="<?=Yii::getAlias('@web/backend/img/login/right_arm.png');?>" alt=""/>

			<div class="loginBox">
				<img class="img-hand left" src="<?=Yii::getAlias('@web/backend/img/login/handleft.png');?>" alt=""/>
				<img class="img-hand right" src="<?=Yii::getAlias('@web/backend/img/login/handright.png');?>" alt=""/>

				<div class="content">
			<!--		<img class="closeBtn" src="<?=Yii::getAlias('@web/backend/img/login/closebutton.png');?>" alt=""/>-->
					<div class="content-title">美粒儿-互联网美容平台</div>

					<?php $form = ActiveForm::begin([
						'options' => [
					'class' => 'form-horizontal',
					'name' => 'form'
					],
					]); ?>
					<div class="content-con">

						<div class="form-group" style="border-bottom: 1px solid #fe7b9d;">
							<label for="" class="col-xs-2 control-label"><img src="<?=Yii::getAlias('@web/backend/img/login/name.png');?>" alt="账户名"></label>
							<div class="col-xs-10" style="padding-left: 0;">
								<?= Html::activeTextInput($model, 'login_name', ['placeholder' => '请输入账户名', 'class' => 'form-control read-only']) ?>
							</div>
							<!--								<div class="errMsg"><?= ($errorLoginName = $model->getErrors('login_name')) ? $errorLoginName[0] : '' ?></div>-->
						</div>
						<div class="form-group">
							<label for="inputPassword" class="col-xs-2 control-label"><img src="<?=Yii::getAlias('@web/backend/img/login/password.png');?>" alt="密码"/></label>
							<div class="col-xs-10" style="padding-left: 0;">
								<?= Html::activePasswordInput($model, 'password', ['placeholder' => '请输入密码', 'class' => 'password form-control read-only']) ?>
							</div>
							<!--			<div class="errMsg"><?= ($errorPassword = $model->getErrors('password')) ? $errorPassword[0] : '' ?></div>-->
						</div>



					</div>
					<div class="content-bottom mg30-y">
						<div class="row">
							<!--			<input type="reset" class="btnBottom rest pull-left" value="取消">-->
							<input type="submit" class="btnBottom ok pull-right" value="登录">

						</div>
					</div>
					<div class="text-center">
						<a class=" forgetPassword" href=""><?= ($errorLoginName = $model->getErrors('login_name')) ? $errorLoginName[0] : '' ?><?= ($errorPassword = $model->getErrors('password')) ? $errorPassword[0] : '' ?></a>
					</div>
					<?php ActiveForm::end(); ?>
				</div>


			</div>
		</div>

	</div>


	<script>
		$('.password').on('focus',function(){
			$('#login').addClass('active');
		}).on('blur',function(){
			$('#login').removeClass('active');
		});


    </script>
</body>
</html>